<template>
    <div class="orderDetail" v-loading="loadingsss">
        <div class="orderDetail-list">
            <el-row :gutter="12">
                <el-col :span="8" v-for="(item, index) of orderDetailData" :key="index">
                    <div class="orderDetail-item" style="position: relative;">
                        <div v-if="item.remainder" class="earlyWarning">
                            <div class="warningContent">
                                <img src="@/assets/image/warning.png" alt="">
                                <div class="warningText"><span>{{ item.remainder }}</span></div>
                                <el-button type="primary" size="mini" @click="knowWarning(item)">确定</el-button>
                            </div>
                        </div>
                        <div class="item-head-info">
                            <div class="head-info-left">
                                <div class="info-left-img">
                                    <img src="@/assets/image/file_item.png" alt="">
                                </div>
                            </div>
                            <div class="head-info-right">
                                <div class="info-right-text">
                                    <div>提单号: <span style="margin-right: 8px;">{{ item.bill_lading_number }}</span>
                                        <el-tag style="font-size: 11px; color: #13ce66;" v-if="item.type == 0"
                                            size="mini" type="success" effect="plain">货主</el-tag>
                                        <el-tag style="font-size: 11px; color: #ffba00;" v-else size="mini"
                                            type="warning" effect="plain">平台</el-tag>
                                    </div>
                                    <div>
                                        <span v-if="item.spell_cabinet">{{
                                            item.spell_cabinet
                                        }}</span>
                                    </div>
                                </div>
                                <div class="info-right-tag">
                                    <div class="right-tag-style">{{ item.container_name }}</div>
                                    <div class="right-tag-style changeBg">{{ item.business_type }}</div>
                                    <div class="right-tag-style changeBg">{{ item.weight }}</div>
                                </div>
                            </div>
                            <div class="item-head-info-type" v-if="item.status == 10">{{ item.status_txt }}</div>
                            <div class="item-head-info-type head-type-item-yellow" v-if="item.status == 20">{{
                                item.status_txt }}</div>
                            <div class="item-head-info-type head-type-item-yellow"
                                v-if="item.status == 30 && item.business_type == '进口'">
                                待卸货</div>
                            <div class="item-head-info-type head-type-item-yellow"
                                v-if="item.status == 30 && item.business_type == '出口'">
                                待装货</div>
                            <div class="item-head-info-type head-type-item-orange" v-if="item.status == 40">{{
                                item.status_txt }}</div>
                            <div class="item-head-info-type head-type-item-gray" v-if="item.status == 50">待确认</div>
                            <div class="item-head-info-type head-type-item-gray" v-if="item.status == 51">待货主确认</div>
                            <div class="item-head-info-type head-type-item-gray" v-if="item.status == 55">待司机收款</div>
                            <div class="item-head-info-type head-type-item-gray" v-if="item.status == 60">{{
                                item.status_txt }}</div>
                        </div>
                        <div class="item-content-info">
                            <div class="content-address-list">
                                <div class="content-address-item">
                                    <div class="address-item-left">
                                        <div v-if="item.status <= 20" class="suitcase">
                                            提箱
                                        </div>
                                        <div v-else class="suitcase suitcase_tow">
                                            提箱
                                        </div>
                                        <div class="little">
                                        </div>
                                        <div v-if="item.factory.length == 1 && item.status <= 20" class="dashed_line">
                                        </div>
                                        <div v-if="item.factory.length > 1 && item.status <= 20"
                                            class="dashed_line_two"></div>
                                        <div v-if="item.factory.length == 1 && item.status > 20" class="solid_line">
                                        </div>
                                        <div v-if="item.factory.length > 1 && item.status > 20" class="solid_line_two">
                                        </div>
                                    </div>
                                    <div class="address-item-right">
                                        <div class="item-right-left">
                                            <div>{{ item.port }}</div>
                                            <div class="address-station">{{ item.station_name }}</div>
                                            <div class="address-station address-station_two">截单时间：{{ item.cut_off_time
                                                || '-- --' }}
                                            </div>
                                            <div class="address-station address-station_two">截港时间：{{
                                                item.cut_off_port_time || '-- --'
                                            }}</div>
                                        </div>
                                        <div class="item-right-button">
                                            <el-button type="info" v-if="item.status == 10 || item.status == 20"
                                                size="mini" :disabled="item.status == 10" @click="uploadImg(item, '30')"
                                                plain>未提箱</el-button>
                                            <el-button type="primary" v-else size="mini" @click="examineBox(item, '30')"
                                                plain>已提箱</el-button>
                                        </div>
                                    </div>
                                </div>

                                <div class="content-address-item" v-for="(factoryInfo, index) of item.factory"
                                    :key="index">
                                    <div class="address-item-left">
                                        <div class="img_box">
                                            <img v-if="factoryInfo.is_to_factory == 0"
                                                src="../../../assets/image/plant_bg.svg"
                                                style="width: 24px;height: 20px;" alt="">
                                            <img v-if="factoryInfo.is_to_factory == 1"
                                                src="../../../assets/image/plant_bg_two.svg"
                                                style="width: 24px;height: 20px;" alt="">
                                            <span v-if="item.factory.length > 1 && factoryInfo.is_to_factory == 0"
                                                class="plant_num">{{ index + 1
                                                }}厂</span>
                                            <span v-if="item.factory.length == 1 && factoryInfo.is_to_factory == 0"
                                                class="plant_num_two">工厂</span>
                                            <span v-if="item.factory.length > 1 && factoryInfo.is_to_factory == 1"
                                                class="plant_num color_text">{{ index + 1
                                                }}厂</span>
                                            <span v-if="item.factory.length == 1 && factoryInfo.is_to_factory == 1"
                                                class="plant_num_two color_text">工厂</span>
                                        </div>
                                        <div class="little little_two">
                                        </div>
                                        <div v-if="item.factory.length == 1 && factoryInfo.is_to_factory == 0"
                                            class="dashed_line"></div>
                                        <div v-if="item.factory.length > 1 && factoryInfo.is_to_factory == 0"
                                            class="dashed_line_two"></div>

                                        <div v-if="item.factory.length == 1 && factoryInfo.is_to_factory == 1"
                                            class="solid_line"></div>
                                        <div v-if="item.factory.length > 1 && factoryInfo.is_to_factory == 1"
                                            class="solid_line_two"></div>
                                    </div>
                                    <div class="address-item-right">
                                        <div class="item-right-left">
                                            <div>{{ factoryInfo.street }}</div>
                                            <!-- <div class="address-station">{{ factoryInfo.city }}</div> -->
                                            <div class="address-station">{{ factoryInfo.load_and_unload_address }}</div>
                                            <div class="address-station address-station_two"
                                                v-if="item.business_type == '进口'">卸货时间：{{
                                                    factoryInfo.load_and_unload_time }}</div>
                                            <div class="address-station address-station_two"
                                                v-if="item.business_type == '出口'">装货时间：{{
                                                    factoryInfo.load_and_unload_time }}</div>
                                            <div class="attention-tags-item" style="margin-top: 3px;"
                                                v-if="factoryInfo.is_weighed == 1 && item.status > 10"
                                                @click="lookImage(factoryInfo.tf_id, item.order_id, factoryInfo.weighed_remarks)">
                                                <span>需要过磅</span><i class="el-icon-arrow-right"></i>
                                            </div>
                                        </div>
                                        <div class="item-right-button">
                                            <el-button type="info" v-if="factoryInfo.is_to_factory == 0" size="mini"
                                                :disabled="item.status <= 20"
                                                @click="uploadImg(item, '40', factoryInfo)" plain>未到厂</el-button>
                                            <el-button type="primary"
                                                v-if="factoryInfo.is_to_factory == 1 && item.business_type == '进口'"
                                                size="mini" @click="examineBox(item, '40', factoryInfo, '卸货')"
                                                plain>已卸货</el-button>
                                            <el-button type="primary"
                                                v-if="factoryInfo.is_to_factory == 1 && item.business_type == '出口'"
                                                size="mini" @click="examineBox(item, '40', factoryInfo, '装货')"
                                                plain>已装货</el-button>
                                        </div>
                                    </div>
                                </div>
                                <div class="content-address-item">
                                    <div class="address-item-left">
                                        <div v-if="item.status < 50" class="suitcase">
                                            落箱
                                        </div>
                                        <div v-else class="suitcase suitcase_tow">
                                            落箱
                                        </div>
                                    </div>
                                    <div class="address-item-right">
                                        <div class="item-right-left" style="margin-top: -2px">
                                            <div>{{ item.port }}</div>
                                            <!-- <div class="address-station">{{ item.drop_station_name }}</div> -->
                                            <div class="orderDetail-price-info"
                                                style="cursor: pointer; display: flex; align-items: center;"
                                                @click="pieceWeight(item)">
                                                货品件重尺: <span v-if="item.brand_volume" class="pieceStyle">{{
                                                    item.brand_volume }}</span> <i class="el-icon-edit-outline"
                                                    style="margin-left: 6px; color: rgb(78, 89, 105);"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="affirm">
                                        <div class="item-right-button">
                                            <el-button type="primary" @click="openOtherPrice(item, '确认落箱')"
                                                v-if="item.status == 40" size="mini" plain>确认落箱</el-button>
                                            <!-- @click="confirm(item)" -->
                                            <el-button type="info" v-if="item.status == 50" disabled size="mini"
                                                plain>待货主确认</el-button>
                                            <el-button type="info" v-if="item.status == 55 && item.payment_method == 2"
                                                size="mini" plain>待司机确认</el-button>
                                            <el-button type="info" v-if="item.status == 60" disabled size="mini"
                                                plain>已确认完成</el-button>
                                            <div class="orderDetail-price-info"
                                                style="font-size: 10px; color: rgb(245, 63, 63);"
                                                v-if="item.countdown && item.status == 50 && item.payment_method == 1">
                                                {{ item.countdown }}后自动确认
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div style="height: 112px;">
                                <div class="attention-tags" v-if="item.is_appoint == 1 || item.other_note.length > 0">
                                    <div class="attention-tags-item" v-if="item.is_appoint == 1"
                                        @click="lookBoxnumber(item)"><span>指定箱号</span><i
                                            class="el-icon-arrow-right"></i>
                                    </div>
                                    <div class="attention-tags-item" v-for="(items, index) of item.other_note"
                                        :key="index">
                                        {{ items }}</div>

                                </div>
                                <div class="orderDetail-price">
                                    <div class="orderDetail-price-info">
                                        <div style="cursor: pointer; display: flex; align-items: center;">
                                            <div>
                                                结算: <span v-if="item.payment_method == 1"
                                                    style="color: #165DFF; font-weight: 500;">平台</span>
                                                <span v-if="item.payment_method == 2"
                                                    style="color: #165DFF; font-weight: 500;">线下</span>
                                            </div>
                                            <div style="margin-left: 3px;">
                                                发票: <span style="color: #165DFF; font-weight: 500;">{{ item.invoice
                                                }}</span>

                                            </div>
                                        </div>
                                        <div style="cursor: pointer;" @click="setDialog(item, '当前货主运费', 0)">
                                            货主运费: <span v-if="item.amount != '0.00'"
                                                style="color: rgb(245, 63, 63); font-weight: 500;">￥{{
                                                    item.amount
                                                }}</span><span v-else
                                                style="color: rgb(245, 63, 63); font-weight: 500;">可议价</span><i
                                                v-if="item.payment_method == 1 && item.status < 50"
                                                class="el-icon-edit-outline"
                                                style="margin-left: 6px; color: rgb(78, 89, 105);"></i>
                                        </div>
                                        <!-- 线上 -->
                                        <div v-if="item.status > 10 && item.settlement_method == 1 && item.payment_method == 1"
                                            style="cursor: pointer;" @click="setDialog(item, '当前接单运费', 0)">
                                            月结运费: <span style="color: rgb(245, 63, 63); font-weight: 500;">￥{{
                                                item.actual_amount
                                            }}</span><i class="el-icon-edit-outline" v-if="item.status < 50"
                                                style="margin-left: 6px; color: rgb(78, 89, 105);"></i>
                                        </div>
                                        <div v-if="item.status > 10 && item.settlement_method == 2 && item.payment_method == 1"
                                            style="cursor: pointer;" @click="setDialog(item, '当前接单运费', 1)">
                                            现结运费: <span style="color: rgb(245, 63, 63); font-weight: 500;">￥{{
                                                item.actual_amount
                                            }}</span><i class="el-icon-edit-outline" v-if="item.status < 50"
                                                style="margin-left: 6px; color: rgb(78, 89, 105);"></i>
                                        </div>
                                        <!-- 线下现结 -->
                                        <div v-if="item.payment_method == 2" style="cursor: pointer;">
                                            现结运费: <span v-if="item.amount != '0.00'"
                                                style="color: rgb(245, 63, 63); font-weight: 500;">￥{{
                                                    item.actual_amount
                                                }}</span><span v-else
                                                style="color: rgb(245, 63, 63); font-weight: 500;">-- --</span>
                                        </div>
                                        <div v-if="item.status == 55 && item.settlement_method == 1">
                                            收款日期: <span style="font-weight: 500;">{{
                                                item.settlement_date
                                            }}</span>
                                        </div>
                                        <div style="cursor: pointer;" @click="openOtherPrice(item, '保存')">
                                            其他: <span style="color: rgb(134, 144, 156); font-weight: 500;">￥{{
                                                item.other_amount
                                            }}</span>
                                            <i style="color: rgb(78, 89, 105); margin-left: 6px"
                                                class="el-icon-document"></i>
                                        </div>
                                    </div>
                                    <!-- <div class="orderDetail-price-button">
                                        <el-button type="primary" size="mini" v-if="item.status == 10"
                                            @click="setDialog(item)">修改运费</el-button>
                                    </div> -->
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="userInfo">
                                <div style="display: flex; align-items: center; justify-content: space-around;"
                                    v-if="item.status == 10 && item.quotation_count == 0">
                                    <div class="user-null_top">
                                        <img src="@/assets/image/taskfooter_img.png" alt="">
                                        <span>暂无接单</span>
                                    </div>
                                    <div v-if="item.payment_method == 1" class="">
                                        <el-button size="mini" type="primary" @click="addUser(item)">添加接单人</el-button>
                                    </div>
                                </div>
                                <div class="user-null_top" v-else-if="item.status == 10 && item.quotation_count != 0">
                                    <div style="height: 48px;line-height: 58px;" v-if="!item.car_number">
                                        <span>已有{{ item.quotation_count }}人参与报价，</span><span
                                            style="color: #165DFF; cursor: pointer;"
                                            @click="getQuotation(item)">点击查看</span>
                                    </div>
                                </div>
                                <div class="user-null" v-else>
                                    <div class="dirve-info" v-if="item.driver_name" style="position: relative;"
                                        @click="setUserinfo(item)">
                                        <img src="@/assets/image/driver_head.png" style="width: 40px;height: 40px;"
                                            alt="">
                                        <div class="dirve-info-phone">
                                            <div class="info-phone-name">{{ item.driver_name }}·{{ item.phone }}</div>
                                            <div v-if="item.car_number" class="info-phone-car">{{ item.car_number }}
                                            </div>
                                        </div>
                                        <div v-if="item.status == 20"
                                            style="position: absolute; left: 0; bottom: -8px; font-size: 10px; cursor: pointer;">
                                            修改司机
                                        </div>
                                    </div>
                                    <div style="height: 48px; display: flex; flex-direction: column; justify-content: center; cursor: pointer;"
                                        v-if="!item.driver_name" @click="setUserinfo(item)">
                                        <span>已接单正在安排具体车辆……</span>
                                        <span v-if="item.status == 20" style="color: rgb(245, 63, 63);">修改接单人</span>
                                    </div>
                                    <div v-if="item.status == 20" @click="cancelMyOrder(item)" class="driver_cancel">
                                        <i class="el-icon-delete"></i>
                                        <span>取消订单</span>
                                    </div>
                                    <div class="driver_position" @click="getLocation(item.car_number, item)"
                                        v-if="item.status < 50 && item.car_number">
                                        <i class="el-icon-location-outline"></i>
                                        查看车辆位置
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 添加接单人  @open="clearValidation"-->
        <el-dialog :title="adduserInfoTitle" :visible.sync="dialogFormUser" :close-on-click-modal="false"
            @close="$refs.formUser.resetFields()">
            <div v-loading="loading">
                <el-form :model="formUser" :rules="rulesTwo" ref="formUser">
                    <el-form-item v-if="optionboxShow" label="选择柜子" prop="id" :label-width="formLabelWidthTwos">
                        <el-radio-group @input="chooseedBox" v-model="formUser.id">
                            <div v-for="(item, index) in optionsBoxInfo" :key="index" style="margin-top: 4px;">
                                <el-radio :label="item.id">{{ item.order_info }}</el-radio>
                            </div>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="接单人" prop="combinedId" :label-width="formLabelWidthTwos">
                        <el-select size="mini" v-model="formUser.combinedId" @change="changesyscodetwo" filterable
                            remote clearable placeholder="请选择接单人" :remote-method="remoteMethod" :loading="loadingss">
                            <el-option v-for="item in addUserInfo" :key="`${item.pfid}-${item.user_type}`"
                                :label="item.name" :value="`${item.pfid},${item.user_type}`"></el-option>
                        </el-select>
                    </el-form-item>

                    <!-- <template v-if="adduserInfoTitle === '修改接单人'">
                        <el-form-item label="结算方式" prop="settlement_amount" :label-width="formLabelWidthTwo">
                            <el-radio @change="optionType" v-model="formUser.settlement_amount" label="2">现结</el-radio>
                            <el-radio @change="optionType" v-model="formUser.settlement_amount" label="1">月结</el-radio>
                        </el-form-item>
                    </template> -->

                    <!-- 其他情况 -->
                    <template>
                        <el-form-item label="结算方式" prop="settlement_amount" :label-width="formLabelWidthTwos">
                            <el-radio @change="optionTypeTwo" v-model="formUser.settlement_amount"
                                label="2">现结</el-radio>
                            <el-radio @change="optionTypeTwo" v-model="formUser.settlement_amount"
                                label="1">月结</el-radio>
                        </el-form-item>
                    </template>
                    <!-- <template v-if="adduserInfoTitle === '修改接单人'">
                        <el-form-item label="运费" prop="amount" :label-width="formLabelWidthTwo">
                            <el-input size="mini" style="width: 185px;" maxlength="6" @input="filterAmount(2)"
                                v-model="formUser.amount" autocomplete="off"></el-input>
                        </el-form-item>
                    </template> -->

                    <!-- 其他情况 -->
                    <template>
                        <el-form-item v-for="(item, index) in formUser.amounts" :key="item.id"
                            :label="`运费 ${item.bill_lading_number}`" :prop="`amounts.${index}.actual_amount`"
                            :label-width="formLabelWidthTwos">
                            <el-input size="mini" style="width: 185px;" maxlength="12" @input="filterAmount(2, item.id)"
                                v-model="item.actual_amount" autocomplete="off"></el-input>
                        </el-form-item>
                    </template>
                    <!-- <el-form-item>
                        <div>
                            <span style="font-size: 12px;">当前已接单任务(可双拼)</span>
                        </div>
                        <el-table :data="formUser.tableData" style="width: 100%">
                            <el-table-column prop="destination" label="目的地" width="180" align="center">
                            </el-table-column>
                            <el-table-column prop="real_name" label="承运人" width="120" align="center">
                            </el-table-column>
                            <el-table-column prop="car_number" label="车牌" align="center">
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="additionalOrder(scope.row)"
                                        type="info">追加本单</el-button>
                                </template>
</el-table-column>
</el-table>
</el-form-item> -->
                    <!-- <el-form-item label="承运人" prop="real_name" size="mini" :label-width="formLabelWidthTwo">
                        <el-input style="font-size: 12px; width: 50%;" v-model="formUser.real_name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone" size="mini" :label-width="formLabelWidthTwo">
                        <el-input style="font-size: 12px; width: 50%;" v-model="formUser.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证" prop="citizen_cardid" size="mini" :label-width="formLabelWidthTwo">
                        <el-input style="font-size: 12px; width: 50%;" v-model="formUser.citizen_cardid"></el-input>
                    </el-form-item>
                    <el-form-item label="车牌" prop="car_number" size="mini" :label-width="formLabelWidthTwo">
                        <el-input style="font-size: 12px; width: 50%;" v-model="formUser.car_number"></el-input>
                    </el-form-item> -->
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormUser = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('formUser')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改价格 -->
        <el-dialog title="修改运费" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
            @close="$refs.form.resetFields()" width="25%">
            <div style="margin-bottom: 20px;font-size: 12px;">
                {{ oldPriceName }}：<span
                    style="color: rgb(245, 63, 63);font-family: PingFang SC;font-size: 13px;font-weight: 500;">￥{{
                        oldPrice }}</span>
            </div>
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="新运费" prop="price" :label-width="formLabelWidth">
                    <el-input maxlength="12" @input="filterAmount(1)" v-model="form.price"
                        autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="affirmSet('form')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 品名件重尺  -->
        <el-dialog title="货品件重尺" :close-on-click-modal="false" :visible.sync="dialogFormVisibleTwo"
            @close="$refs.formTwo.resetFields()" width="30%">
            <el-form :model="formTwo" :rules="rulesTwos" ref="formTwo">
                <el-form-item label="货品件重尺" prop="brand_volume" :label-width="formLabelWidthTwo">
                    <!-- autocomplete="off" -->
                    <el-input type="textarea" autosize v-model="formTwo.brand_volume"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleTwo = false">取 消</el-button>
                <el-button type="primary" @click="addWeight('formTwo')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 查看编辑箱的信息 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" :close-on-click-modal="false" width="70%">
            <div v-loading="loading">
                <div class="suitcase_time" v-if="showName == 0">提箱时间: {{ add_time }}</div>
                <div class="suitcase_time set_box_number" v-if="showName == 0">
                    <div>
                        <div v-for="(containerItem, indexs) of container" :key="containerItem.tc_id">
                            <div class="suitcase_time" style="margin-bottom: 10px;">箱号{{ indexs + 1 }}: <el-input
                                    size="mini" style="width: 200px"
                                    v-model="containerItem.container_number"></el-input></div>
                        </div>
                    </div>
                    <el-button style="margin-left: 20px;margin-bottom: 10px;" @click="setBox_number" type="primary"
                        size="mini">修改箱号</el-button>
                </div>
                <div class="suitcase_time" v-if="showName == 1">{{ textStatus }}时间: {{ add_time }}
                </div>
                <div class="suitcase_time" v-if="showName == 1">
                    工厂地址：{{ factory_address }}
                </div>
                <div class="box_img" v-if="imagesShow">
                    <div class="box_img_item" v-for="(imgItem, index) of imageInfo" :key="index">
                        <div class="box_img_item_info" v-if="imgItem.value != ''" style="text-align: right;">
                            <i style="font-size: 20px; color: red; cursor: pointer;" @click="delImage(imgItem)"
                                class="el-icon-delete"></i>
                            <el-image class="image" fit="cover" :preview-src-list="[imgItem.value]" :src="imgItem.value"
                                alt=""></el-image>
                            <!-- <img class="image" :src="imgItem.value" alt=""> -->
                            <div class="imageTextInfo">
                                <span style="margin-top: 12px">{{ imgItem.field_name }}</span>
                            </div>
                        </div>
                        <div style="width: 100%;" v-else>
                            <div class="uploadImgs">
                                <div class="uploadImgItem">
                                    <el-upload class="avatar-uploader" action=""
                                        accept="image/jpeg, image/png, image/gif" :show-file-list="false"
                                        :http-request="goRequest"
                                        :before-upload="(file) => beforeAvatarUpload(file, imgItem, index, 0)">
                                        <!-- <img v-if="imgItem.value != null" :src="imgItem.value" class="avatar"> -->
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div class="imageTextInfo">
                                        <span style="margin-top: 12px">{{ imgItem.field_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="box_img" v-if="!imagesShow">
                    <div class="box_img_item" v-for="(imgItem, index) of firstHalfImages" :key="index">
                        <div class="box_img_item_info" v-if="imgItem.value != ''" style="text-align: right;">
                            <i style="font-size: 20px; color: red; cursor: pointer;" @click="delImage(imgItem)"
                                class="el-icon-delete"></i>
                            <el-image fit="cover" class="image" :preview-src-list="[imgItem.value]" :src="imgItem.value"
                                alt=""></el-image>
                            <div class="imageTextInfo">
                                <span style="margin-top: 12px">{{ imgItem.field_name }}</span>
                            </div>
                        </div>
                        <div style="width: 100%;" v-else>
                            <div class="uploadImgs">
                                <div class="uploadImgItem">
                                    <el-upload class="avatar-uploader" accept="image/jpeg, image/png, image/gif"
                                        action="" :show-file-list="false" :http-request="goRequest"
                                        :before-upload="(file) => beforeAvatarUpload(file, imgItem, index, 0)">
                                        <!-- <img v-if="imgItem.value != null" :src="imgItem.value" class="avatar"> -->
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div class="imageTextInfo">
                                        <span style="margin-top: 12px">{{ imgItem.field_name }}</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- <span style="margin-top: 20px">{{ imgItem.field_name }}</span> -->
                    </div>
                </div>
                <div class="box_img" v-if="!imagesShow">
                    <div class="box_img_item" v-for="(imgItem, index) of secondHalfImages" :key="index">
                        <div class="box_img_item_info" v-if="imgItem.value != ''" style="text-align: right;">
                            <i style="font-size: 20px; color: red; cursor: pointer;" @click="delImage(imgItem)"
                                class="el-icon-delete"></i>
                            <el-image fit="cover" class="image" :preview-src-list="[imgItem.value]" :src="imgItem.value"
                                alt=""></el-image>
                            <!-- <img :src="imgItem.value" alt=""> -->
                            <div class="imageTextInfo">
                                <span style="margin-top: 12px">{{ imgItem.field_name }}</span>
                            </div>
                        </div>
                        <div style="width: 100%;" v-else>
                            <div class="uploadImgs">
                                <div class="uploadImgItem">
                                    <el-upload class="avatar-uploader" accept="image/jpeg, image/png, image/gif"
                                        action="" :show-file-list="false" :http-request="goRequest"
                                        :before-upload="(file) => beforeAvatarUpload(file, imgItem, index, 1)">
                                        <!-- <img v-if="imgItem.value != null" :src="imgItem.value" class="avatar"> -->
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div class="imageTextInfo">
                                        <span style="margin-top: 12px">{{ imgItem.field_name }}</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- <span style="margin-top: 12px">{{ imgItem.field_name }}</span> -->
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" v-if="isDel == false" @click="dialogVisible = false">关 闭</el-button>
                <el-button type="primary" v-else @click="setImage">确定修改</el-button>
            </span>
        </el-dialog>
        <!-- 上传提箱落箱照片 -->
        <el-dialog :title="this.uploadTitle" :close-on-click-modal="false" :visible.sync="dialogVisibleTwo" width="70%">
            <div v-loading="loading">
                <div class="suitcase_time set_box_number" v-if="uploadTitle == '上传提箱照片'">
                    <div>
                        <div v-for="(containerItem, indexs) of container" :key="containerItem.tc_id">
                            <div class="suitcase_time" style="margin-bottom: 10px;">箱号{{ indexs + 1 }}: <el-input
                                    size="mini" style="width: 200px"
                                    v-model="containerItem.container_number"></el-input></div>
                        </div>
                    </div>
                    <el-button style="margin-left: 30px; margin-bottom: 10px;" type="primary" @click="setBox_number"
                        size="mini">修改箱号</el-button>
                </div>
                <div v-for="(item, index) of need_info" :key="index">
                    <span>箱子</span>
                    <div class="uploadImg">
                        <div class="uploadImgItem" v-for="(imgItem, indexs) of item" :key="indexs">
                            <!-- :on-success="handleAvatarSuccess" -->
                            <el-upload class="avatar-uploader" accept="image/jpeg, image/png, image/gif" action=""
                                :show-file-list="false" :http-request="goRequest"
                                :before-upload="(file) => beforeAvatarUpload(file, imgItem, indexs, index)">
                                <img v-if="imgItem.value != null" :src="imgItem.value" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <div class="imageTextInfo">
                                <span style="margin-top: 12px">{{ imgItem.field_name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleTwo = false">取 消</el-button>
                <el-button type="primary" @click="uploadOver">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 查看车辆位置 -->
        <el-dialog title="查看车辆位置" :close-on-click-modal="false" :visible.sync="dialogVisiblelocation" width="70%">
            <div style="display: flex; position: relative;">
                <div style="flex: 1;">
                    <div id="container" class="container"></div>
                </div>
                <div class="info-box">
                    <p>当前位置：<span>{{ form.address }}</span></p>
                    <p>位置时间：<span>{{ locationInfo.position_time }}</span></p>
                    <p>当前速度：<span>{{ locationInfo.spd }}</span></p>
                    <p>箱信息：<span>{{ locationData.container_name }}</span></p>
                    <p>提箱场站：<span>{{ locationData.station_name }}</span></p>
                    <p>运输人：<span>{{ locationData.driver_name }}</span></p>
                    <p>车牌号：<span>{{ locationData.car_number }}</span></p>
                    <p>联系电话：<span>{{ locationData.phone }}</span></p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="dialogVisiblelocation = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- <div id="mapContainer" style="height: 400px;"></div> -->
        <!-- 其他价格 -->
        <el-dialog title="其他费用" :close-on-click-modal="false" :visible.sync="dialogTableVisible">
            <div v-loading="loading">
                <span style="font-size: 14px; font-weight: 600; line-height: 30px;">如果存在费用可在表格添加</span>
                <el-table style="font-size: 12px;" :data="backOtherPrice">
                    <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
                    <el-table-column property="field_name" label="名称" align="center" width="150">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.field" clearable placeholder="请选择"
                                @change="(sysCode) => changesyscode(sysCode, scope.$index)">
                                <el-option v-for="(item) in amountNeed_info[0]" :key="item.field"
                                    :label="item.field_name" :value="item.field">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column property="type" label="归属" align="center" width="120">
                        <template slot-scope="scope">

                            <!-- <el-select v-else v-model="scope.row.type" clearable placeholder="请选择">
                                <el-option label="接单人" :value="0"></el-option>
                                <el-option label="平台" :value="1"></el-option>
                            </el-select> -->
                            <el-input v-if="imgItemInfo.status == 60" disabled style="font-size: 12px;"
                                v-model="roles"></el-input>
                            <el-select v-else v-model="scope.row.type" clearable placeholder="请选择">
                                <el-option label="接单人" :value="0"></el-option>
                                <el-option label="平台" :value="1"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column property="amount" label="费用(元)" align="center" width="100">
                        <template slot-scope="scope">
                            <el-input style="font-size: 12px;" v-model="scope.row.amount"
                                @input="getSuccessPrice(scope.$index)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column property="value" align="center" label="图片">
                        <template slot-scope="scope">
                            <div v-if="scope.row.value != ''" style="display: flex; justify-content: center;">
                                <el-image fit="cover" :src="scope.row.value" alt="图片" class="square-image"
                                    :preview-src-list="[scope.row.value]">
                                    <div slot="error" class="demo-image__error">
                                        暂无图片
                                    </div>
                                </el-image>
                                <i style="font-size: 15px; color: red; cursor: pointer;" @click="delImageTwo(scope.row)"
                                    class="el-icon-delete"></i>
                            </div>
                            <div v-else class="table_avatar">
                                <el-upload class="avatar-uploader" accept="image/jpeg, image/png, image/gif" action=""
                                    :show-file-list="false" :http-request="goRequest"
                                    :before-upload="(file) => beforeAvatarUpload(file, scope.row)">
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                        <template slot-scope="scope">
                            <i v-if="scope.$index === backOtherPrice.length - 1" @click="addTableRow"
                                style="font-size: 20px;" class="el-icon-circle-plus"></i>
                            <i v-if="backOtherPrice.length > 1" @click="removeTableRow(scope.$index)"
                                style="font-size: 20px;" class="el-icon-remove"></i>
                            <i v-if="backOtherPrice.length == 1" @click="removeData(scope.$index)"
                                style="font-size: 20px;" class="el-icon-remove"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span v-if="dialogShow == '0'" slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="conserve(priceBtn)">{{ priceBtn }}</el-button>
            </span>
            <div v-if="dialogShow == '1'" style="margin-top: 30px;">确认完成本条任务运输吗?</div>
            <span v-if="dialogShow == '1'" slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 过磅照片 -->
        <el-dialog title="查看过磅信息" :close-on-click-modal="false" :visible.sync="dialogVisibleThree" width="70%">
            <div v-loading="loading">
                <div class="suitcase_time">车辆行驶证照片</div>
                <div class="box_img">
                    <div class="box_img_item" v-for="(item, index) in licenseList" :key="index">
                        <div class="box_img_item_info" v-if="item.value != ''" style="text-align: right;">
                            <i style="font-size: 20px; color: red; cursor: pointer;" @click="delImage(item)"
                                class="el-icon-delete"></i>
                            <el-image fit="cover" class="image" :preview-src-list="[item.value]" :src="item.value"
                                alt=""></el-image>
                            <div class="imageTextInfo">
                                <span style="margin-top: 12px">{{ item.field_name }}</span>
                            </div>
                        </div>
                        <div style="width: 100%;" v-else>
                            <div class="uploadImg">
                                <div class="uploadImgItem">
                                    <el-upload class="avatar-uploader" accept="image/jpeg, image/png, image/gif"
                                        action="" :show-file-list="false" :http-request="goRequest"
                                        :before-upload="(file) => beforeAvatarUpload(file, item)">
                                        <!-- <img v-if="imgItem.value != null" :src="imgItem.value" class="avatar"> -->
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div class="imageTextInfo">
                                        <span style="margin-top: 12px">{{ item.field_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <span style="margin-top: 20px">{{ item.field_name }}</span> -->
                    </div>

                </div>
                <div class="suitcase_time" style="padding-top: 20px;">过磅要求: {{ weighed_text }}</div>
                <div class="box_img">
                    <div class="box_img_item" v-for="(imgItem, index) of weighed_img" :key="index">
                        <div class="box_img_item_info" v-if="imgItem.value != ''" style="text-align: right;">
                            <i style="font-size: 20px; color: red; cursor: pointer;"
                                @click="delImageThree(imgItem, index)" class="el-icon-delete"></i>
                            <el-image fit="cover" class="image" :preview-src-list="[imgItem.value]" :src="imgItem.value"
                                alt=""></el-image>
                        </div>
                        <div style="width: 100%;" v-if="index == weighed_img.length - 1 && weighed_img.length < 7">
                            <div class="uploadImg">
                                <div class="uploadImgItem">
                                    <el-upload class="avatar-uploader" accept="image/jpeg, image/png, image/gif"
                                        action="" :show-file-list="false" :http-request="goRequest"
                                        :before-upload="(file) => beforeAvatarUploadTwo(file, index)">
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisibless">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog> -->
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button @click="dialogVisibleThree = false">取 消</el-button>
                <el-button type="primary" @click="submitWeighing">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 查看报价 -->
        <el-dialog title="查看报价" :close-on-click-modal="false" :visible.sync="dialogFormVisibleQuotation" width="55%">
            <div v-loading="loadingQuotation">
                <div class="quotation" v-for="(item, index) in quotationList" :key="index">
                    <div style="width: 40px;">{{ item.real_name }}</div>
                    <div>{{ item.add_time }}</div>
                    <div style="width: 60px;">{{ item.amount }}</div>
                    <div>
                        <el-button type="primary" size="mini" @click="quotaSubmit(item)">成交</el-button>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisibleQuotation = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { orderStatus, taskDetail, setFreight, completion, boxPicture, nowLocation, getBoxInfo, affirmTakeBox, otherCost, getUser, carrierList, getJoint, takeOrder, setPrice, setBoxNumber, recognize, fileUpload, getWeighing, editWeighing, cancelOrders, optionsBox, getQuotationInfo, quotationSubmit, Piecewc, isVerify, getNowPrice, setTakeOrder, getActualAmount, setActualAmount } from '@/api/api'
import axios from "axios"; //引入axios
import AMapLoader from "@amap/amap-jsapi-loader";
import { Icon } from 'element-ui';
window._AMapSecurityConfig = {
    // 安全密钥
    securityJsCode: localStorage.getItem('map_secret'),
};
export default {
    props: {
        taskId: {
            type: String,
        },
        taskType: {
            type: String,
        }
    },
    data () {
        return {
            orderDetailData: [],
            dialogFormVisible: false,
            dialogVisible: false,
            dialogVisiblelocation: false,
            dialogTableVisible: false,
            dialogVisibleTwo: false,
            dialogFormUser: false,
            dialogVisibleThree: false,
            dialogFormVisibleQuotation: false,
            dialogFormVisibleTwo: false,
            formUser: {
                id: null,
                pfid: '',
                combinedId: null,
                // real_name: '',
                // phone: '',
                // car_number: '',
                // citizen_cardid: '',
                // tableData: [],
                order_id: '',
                // tc_id: '',
                settlement_amount: '1',
                amount: '',
                amounts: [],
                user_type: '',
            },
            // 弹窗标题
            adduserInfoTitle: '',
            rulesTwo: {
                id: [
                    { required: true, message: '请选择柜子', trigger: 'change' },
                ],
                combinedId: [
                    { required: true, message: '请选择接单人', trigger: 'change' },
                ],
                settlement_amount: [
                    { required: true, message: '请选择结算方式', trigger: 'change' },
                ],
                amount: [
                    { required: true, message: '请输入运费', trigger: 'blur' },
                ],
                amounts: [], // 动态生成验证规则
                // real_name: [
                //     { required: true, message: '请输入承运人', trigger: 'blur' }
                // ],
                // phone: [
                //     { required: true, message: '请输入电话号码', trigger: 'blur' },
                //     {
                //         // pattern: /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/
                //         pattern: /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9})|((\d{3,4})?[0-9]{7,8}))$/,
                //         message: '请输入有效的电话号码',
                //         trigger: 'blur'
                //     }
                // ],
                // citizen_cardid: [
                //     { required: true, message: '请输入身份证号码', trigger: 'blur' },
                //     {
                //         pattern: /^(?:\d{15}|\d{17}[\dX])$/, // 身份证号码正则（15位或18位）
                //         message: '请输入有效的身份证号码',
                //         trigger: 'blur'
                //     }
                // ],
                // car_number: [
                //     { required: true, message: '请输入车牌号', trigger: 'blur' },
                //     {
                //         pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/, // 车牌号正则
                //         message: '请输入有效的车牌号',
                //         trigger: 'blur'
                //     }
                // ],
            },
            form: {
                price: ''
            },
            rules: {
                price: [
                    { required: true, message: '请输入运费价格', trigger: 'blur' },
                ]
            },
            formTwo: {
                brand_volume: ''
            },
            rulesTwos: {
                brand_volume: [
                    { required: true, message: '请输入品名件重尺', trigger: 'blur' },
                ]
            },
            formLabelWidth: '70px',
            formLabelWidthTwos: '90px',
            formLabelWidthTwo: '90px',
            childData: [],
            childDataTwo: [],
            imageInfo: [],
            container: [],
            showName: 0,
            oldPrice: '',
            oldPriceName: '',
            map: null, // 地图实例
            locationInfo: {},
            locationData: {},
            otherPrice: [],
            backOtherPrice: [
                {
                    amount: "",
                    field: '',
                    field_name: "",
                    format_type: "file",
                    type: '',
                    value: ''
                }
            ],
            dialogShow: '',
            nowItem: {},
            textStatus: '',
            add_time: '',
            factory_address: '',
            need_info: [],
            imgItemInfo: {},
            amountNeed_info: [],
            factoryUpload: {},
            // 是否删除
            isDel: false,
            // 修改的状态是什么
            imageStatus: '',
            // 提箱装卸货名称
            uploadTitle: '',
            // 接单人信息
            addUserInfo: [],
            // 添加接单人存数据
            itemUser: {},
            // 加载
            loading: false,
            loadingss: false,
            loadingsss: false,
            // 费用按钮显示
            priceBtn: '',
            // 位置信息
            form: {
                lng: "",
                lat: "",
                address: "",
                adcode: "", //地区编码
                position_index: ''
            },
            firstHalfImages: [],
            secondHalfImages: [],
            imagesShow: true,
            //   过磅行驶证
            license: {},
            // 过磅信息
            weighed_img: [],
            //过磅要求
            weighed_text: '',
            // 车辆行驶证数组
            licenseList: [
                {
                    car_license_img: "",
                    field_name: '车头行驶证',
                    value: '',
                    type: '1'
                },
                {
                    trailer_license_img: "",
                    field_name: '挂车行驶证',
                    value: '',
                    type: '2'
                }
            ],
            // 多张图片
            // dialogImageUrl: '',
            // dialogVisibless: false
            // 修改过磅信息参数
            weighingInfo: {
                tf_id: '',
                order_id: ''
            },
            // 添加费用type
            roles: '平台',
            // 是否修改
            is_boxNumber: false,
            optionsBoxInfo: [],
            optionboxShow: false,
            usercode: '',
            // 车辆图片
            imgUrl: require("@/assets/image/car_location.png"),
            imgUrl_fac: require("@/assets/image/factary_img.png"),
            imgUrl_port: require("@/assets/image/port_img.png"),
            // 工厂坐标
            otherPosition: [],
            // 报价列表
            quotationList: [],
            loadingQuotation: false,
            // 报价对象
            quotationInfo: {},
            // 倒计时数组
            countdownIntervals: [],
            // 修改运费的id
            setAmount_id: '',
            setAmount_method: '',
            actualAmountList: [],
        }
    },
    created () {
        // this.getOrderStatus(1)

    },
    mounted () {
        // this.loadAmap()
        // 通过遮罩层关闭图片预览
        document.addEventListener('click', function (e) {
            if (e.target.className == "el-image-viewer__mask") {
                let close = document.querySelector(".el-icon-circle-close");
                close.click();
            }
        });
    },
    beforeDestroy () {
        this.countdownIntervals.forEach(clearInterval);
    },
    methods: {
        getOrderStatus (formData, id, num) {
            const idTwo = id || ''
            const numTwo = num || ''
            if (formData === 1) {
                this.$emit('openLoading', 1)
            } else if (formData === 2) {
                this.$emit('openLoadingTwo', 1)
            }
            const form = new FormData()
            form.append('group_id', idTwo)
            form.append('bill_lading_number', numTwo)
            orderStatus(form).then(res => {
                // console.log(res, '我是订单状态');
                if (res.status == 200) {
                    if (formData === 1) {
                        this.$emit('openLoading', 2)
                    } else if (formData === 2) {
                        this.$emit('openLoadingTwo', 2)
                    }
                    this.orderDetailData = res.data.info
                    if (this.orderDetailData) {
                        for (let item of this.orderDetailData) {
                            if (item.other_note.length != 0) {
                                if (item.other_note[0].split(',')) {
                                    const other_note = item.other_note[0].split(',')
                                    item.other_note = other_note
                                }
                            }
                            for (let factory of item.factory) {
                                const parts = factory.address.split(" ");
                                // 获取后三个部分
                                const lastTwo = parts.slice(-2).join(" "); // 后两个部分
                                const remaining = parts.slice(1, -2).join(" "); // 前面部分
                                factory.city = lastTwo
                                factory.street = remaining
                            }
                        }
                    }
                } else {
                    if (formData === 1) {
                        this.$emit('openLoading', 2)
                    } else if (formData === 2) {
                        this.$emit('openLoadingTwo', 2)
                    }
                }

            }).catch(err => {
                if (formData === 1) {
                    this.$emit('openLoading', 2)
                } else if (formData === 2) {
                    this.$emit('openLoadingTwo', 2)
                }
            })
        },
        // 任务详情
        getTaskDatile () {
            this.loadingsss = true
            const formData = new FormData()
            formData.append('id', this.taskId)
            formData.append('type', this.taskType)
            if (this.taskType == 1) {
                taskDetail(formData).then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        this.loadingsss = false
                        this.orderDetailData = res.data.info
                        this.startCountdown()
                        for (let item of this.orderDetailData) {
                            if (item.other_note.length != 0) {
                                if (item.other_note[0].split(',')) {
                                    const other_note = item.other_note[0].split(',')
                                    item.other_note = other_note
                                }
                            }

                            for (let factory of item.factory) {
                                const parts = factory.address.split(" ");
                                // 获取后三个部分
                                const lastTwo = parts.slice(-2).join(" "); // 后两个部分
                                const remaining = parts.slice(1, -2).join(" "); // 前面部分
                                factory.city = lastTwo
                                factory.street = remaining
                            }
                        }
                    } else {
                        this.loadingsss = false
                        this.$alert(`${res.data.info}`, '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$emit('call-parent-method', 'a');
                            }
                        });
                    }
                }).catch(err => {
                    this.loadingsss = false
                })
            } else {

                // this.$confirm('该订单在审核中，暂不支持查看，如有需要可进行修改或删除', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(() => {

                // }).catch(() => {

                // });

            }
        },
        // 倒计时转化
        startCountdown () {
            this.orderDetailData.forEach((item) => {
                if (item.countdown) {
                    // 每个条目独立计时器
                    item.remainingTime = this.convertTimeToSeconds(item.countdown);

                    const interval = setInterval(() => {
                        if (item.remainingTime > 0) {
                            item.remainingTime--;
                            item.countdown = this.formatCountdown(item.remainingTime); // 直接更新显示值
                        } else {
                            clearInterval(interval);
                            item.countdown = "00:00:00";
                        }
                    }, 1000);
                    this.countdownIntervals.push(interval);
                }
            });
        },
        formatCountdown (seconds) {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const secs = seconds % 60;
            return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
        },
        convertTimeToSeconds (timeStr) {
            if (!timeStr) return 0;
            const parts = timeStr.split(':').map(Number);
            if (parts.length !== 3) return 0;
            return parts[0] * 3600 + parts[1] * 60 + parts[2];
        },

        // 添加修改件重尺
        pieceWeight (item) {
            if (!item.brand_volume) {
                this.$set(this.formTwo, 'brand_volume', '')
            } else {
                this.$set(this.formTwo, 'brand_volume', item.brand_volume)
            }
            this.dialogFormVisibleTwo = true
            this.childDataTwo = item.child_id
        },

        // 添加件重尺模态框确定
        addWeight (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const formData = new FormData()
                    formData.append('brand_volume', this.formTwo.brand_volume)
                    this.childDataTwo.forEach(function (value, index) {
                        // 使用索引来构建字段的键，例如 'arrayField[0]'
                        formData.append(`child_id[${index}]`, value);
                    });
                    // 调用接口
                    Piecewc(formData).then(res => {
                        console.log(res, '成功');
                        if (res.status == 200) {
                            this.dialogFormVisibleTwo = false
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getTaskDatile()
                            // if (this.taskId == '') {
                            //     this.getOrderStatus()
                            // } else {
                            //     this.getTaskDatile()
                            // }
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        //查看报价
        getQuotation (item) {
            this.quotationInfo = item
            // 调用报价信息接口
            const formData = new FormData()
            formData.append('order_id', item.order_id)
            this.loadingQuotation = true
            getQuotationInfo(formData).then(res => {
                // console.log(res, '我是报价列表');
                if (res.status == 200) {
                    // 处理报价列表，修改 real_name 字段
                    this.quotationList = res.data.list.map(quotation => {
                        if (quotation.real_name) {
                            // 只保留第一个字符，其他字符用 * 代替
                            const firstChar = quotation.real_name.charAt(0);
                            const maskedName = firstChar + '*'.repeat(quotation.real_name.length - 1);
                            return {
                                ...quotation,
                                real_name: maskedName
                            };
                        }
                        return quotation; // 如果没有 real_name，返回原对象
                    });
                    this.loadingQuotation = false
                } else {
                    this.loadingQuotation = false
                }
            }).catch(err => {
                this.loadingQuotation = false
            })
            this.dialogFormVisibleQuotation = true
        },
        // 货主成交
        quotaSubmit (item) {

            this.$confirm('确认把任务分配给该司机?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
            }).then(() => {
                const formData = new FormData()
                formData.append('id', item.id)
                this.loadingQuotation = true
                quotationSubmit(formData).then(res => {
                    if (res.status == 200) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.dialogFormVisibleQuotation = false
                        this.loadingQuotation = false
                        this.getTaskDatile()
                        this.$emit('call-parent-method', this.quotationInfo.id);
                    } else {
                        this.loadingQuotation = false
                    }
                }).catch(err => {
                    this.loadingQuotation = false
                })
            })


        },

        // 取消订单
        cancelMyOrder (item) {
            this.$confirm('确定要取消此订单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // console.log('我是取消订单');
                this.$emit('call-parent-two');
                const formData = new FormData()
                formData.append('order_id', item.order_id)
                cancelOrders(formData).then(res => {
                    if (res.status == 200) {
                        setTimeout(() => {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            // 触发父组件的方法
                            this.$emit('call-parent-method', item.id);
                            this.getTaskDatile()

                        }, 7000);
                    } else {
                        this.$emit('call-parent-method', item.id);

                    }
                }).catch(err => {
                    // this.$message({
                    //     message: res.msg,
                    //     type: 'error'
                    // });
                    console.log(err);
                    this.$emit('call-parent-method', item.id);
                })
            }).catch(() => {
            });
        },
        // 关闭遮罩层
        knowWarning (item) {
            item.remainder = ''
        },
        // 查看指定箱号
        lookBoxnumber (item) {
            this.$alert(`箱号：${item.appoint_container_number}`, '指定箱号', {
                confirmButtonText: '确定',
            });
        },
        // 查看过磅信息
        lookImage (tf_id, order_id, content) {
            this.weighingInfo.tf_id = tf_id
            this.weighingInfo.order_id = order_id
            this.weighed_text = content
            this.dialogVisibleThree = true
            const formData = new FormData()
            formData.append('tf_id', tf_id)
            formData.append('order_id', order_id)
            // 调用过磅信息接口
            getWeighing(formData).then(res => {
                console.log('我是过磅信息', res);
                if (res.status == 200) {
                    this.license = res.data.license
                    this.weighed_img = res.data.weighed_img
                    this.licenseList[0].value = this.license.car_license_img
                    this.licenseList[1].value = this.license.trailer_license_img
                    this.weighed_img.push({
                        value: ''
                    })
                    console.log('我是过磅图片', this.weighed_img);
                }
            })
        },
        // 提交过磅信息
        submitWeighing () {

            // 处理数据
            const weighed_imgs = this.weighed_img.map(item => item.value);
            weighed_imgs.pop()
            // console.log('我是处理好的图片', weighed_imgs);
            this.licenseList.forEach(item => {
                if (item.type == '1') {
                    item.car_license_img = item.value
                } else if (item.type == '2') {
                    item.trailer_license_img = item.value
                }
            })
            // 信息校验
            const isLicenseValid = this.licenseList.some(item => {
                if (!item.value) {
                    this.$alert(`请上传行驶证照片`, '提示', {
                        confirmButtonText: '确定',
                    });
                    return true; // 返回 true 表示发现了无效值
                }
                return false; // 返回 false 表示有效
            });

            // 如果 license 验证不通过，直接返回
            if (isLicenseValid) {
                return false;
            }
            // 检查 imgList 的长度
            if (weighed_imgs.length < 1) {
                this.$alert(`请上传过磅照片`, '提示', {
                    confirmButtonText: '确定',
                });
                return false;
            }
            this.loading = true
            // 将数据转成formdata格式
            const formData = new FormData()
            formData.append('tf_id', this.weighingInfo.tf_id)
            formData.append('order_id', this.weighingInfo.order_id)
            weighed_imgs.forEach((item, index) => {
                formData.append(`weighed_img[${index}]`, item)
            })
            this.licenseList.forEach((item, index) => {
                for (let key in item) {
                    formData.append(`license[${index}][${key}]`, item[key])
                }
            })
            // 调用接口
            editWeighing(formData).then(res => {
                console.log('修改过磅信息成功', res);
                if (res.status == 200) {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    this.dialogVisibleThree = false
                    this.loading = false
                } else {
                    this.loading = false
                }
            }).catch(res => {
                this.loading = false
            })
        },
        // 选中的柜子
        chooseedBox (value) {
            // value 是当前选中的 order_id
            // console.log('Selected Order ID:', value, typeof (value));
            // if (this.usercode) {
            // this.userChange(this.usercode)
            // this.loading = true
            // }
            console.log('formUser.id', this.formUser.id);
            this.actualAmount()

        },
        //模糊搜索接单人
        remoteMethod (query) {
            if (query !== '') {
                this.loadingss = true;
                // setTimeout(() => {
                //     this.loading = false;
                //     this.options = this.list.filter(item => {
                //         return item.label.toLowerCase()
                //             .indexOf(query.toLowerCase()) > -1;
                //     });
                // }, 200);
                const formData = new FormData()
                formData.append('real_name', query)
                carrierList(formData).then(res => {
                    // console.log('接单人信息', res);

                    if (res.status == 200) {
                        this.loadingss = false;
                        this.addUserInfo = res.data
                    } else {
                        this.loadingss = false;
                    }
                }).catch(err => {
                    this.loadingss = false;
                })
            }
        },
        // 修改接单人
        setUserinfo (item) {
            if (item.status == 20) {
                this.adduserInfoTitle = '修改接单人'
                this.optionboxShow = false
                this.itemUser = item
                this.formUser.pfid = item.pfid
                this.formUser.combinedId = `${item.pfid},${item.user_type}`
                this.formUser.amount = item.actual_amount
                this.formUser.user_type = item.user_type
                this.formUser.settlement_amount = String(item.settlement_method)
                this.actualAmount()
                const formData = new FormData()
                formData.append('real_name', item.driver_name)
                carrierList(formData).then(res => {
                    // console.log('接单人信息', res);

                    if (res.status == 200) {
                        this.addUserInfo = res.data
                        this.dialogFormUser = true
                    }
                })
            }
        },
        // 添加接单人
        addUser (item) {

            this.itemUser = item
            this.formUser.amount = item.actual_amount
            this.formUser.settlement_amount = '1'
            this.adduserInfoTitle = '添加接单人'
            carrierList().then(res => {
                // console.log('接单人信息', res);

                if (res.status == 200) {
                    this.addUserInfo = res.data
                }
            })
            if (item.container_type == 0 && item.child_id.length == 2) {
                this.optionboxShow = false
            }
            // console.log(item);
            this.actualAmount()
            if (item.container_type == 0 && item.child_id.length == 1) {

                const formData = new FormData()
                item.child_id.forEach(function (value, index) {
                    formData.append(`child_id[${index}]`, value);
                });
                // 选择柜子
                optionsBox(formData).then(res => {
                    if (res.status == 200) {
                        this.optionsBoxInfo = res.data.list
                        this.optionsBoxInfo.forEach((item, index) => {
                            item.id = index
                        })
                        if (this.optionsBoxInfo.length > 0) {
                            this.optionboxShow = true
                            this.formUser.id = this.optionsBoxInfo[0].id;
                            // this.formUser.order_id = item.order_id;
                        } else {
                            this.optionboxShow = false
                        }
                    }
                })
            } else {
                this.optionboxShow = false
            }

            // 清空当前数据
            this.formUser.combinedId = null
            this.formUser.pfid = ''
            this.formUser.user_type = ''
            this.formUser.order_id = ''
            this.usercode = ''
            this.dialogFormUser = true
            this.$nextTick(() => {
                this.$refs.formUser.clearValidate();
            });

        },
        // 选择柜子方法
        actualAmount () {
            const formData = new FormData()
            formData.append('settlement_method', this.formUser.settlement_amount);
            if (!this.optionboxShow) {
                this.appendOrderData(formData, this.itemUser);

            } else {
                const selectedItem = this.optionsBoxInfo.find(item => item.id === this.formUser.id);
                if (selectedItem) {
                    this.appendOrderData(formData, selectedItem);

                }
            }
            // 修改接单人方法 setActualAmount
            const apiMethod = this.adduserInfoTitle === '添加接单人' ? getActualAmount : setActualAmount;
            apiMethod(formData).then(res => {

                if (this.itemUser.child_id.length == 2) {
                    this.actualAmountList = [res.data.list[0]]
                    this.actualAmountList[0].actual_amount = Number(res.data.list[0].actual_amount) + Number(res.data.list[1].actual_amount)
                } else {
                    this.actualAmountList = res.data.list
                }
                // 初始化 amounts
                this.formUser.amounts = this.actualAmountList.map(item => ({
                    id: item.id,
                    actual_amount: item.actual_amount || '',
                    bill_lading_number: item.bill_lading_number || '',
                }));

                // 动态生成验证规则
                this.rulesTwo.amounts = this.formUser.amounts.map(item => ({
                    id: item.id,
                    actual_amount: [
                        { required: true, message: `请输入运费`, trigger: 'blur' },
                    ],
                }));
            })
        },


        // 选择结算方式
        optionType () {
            const formData = new FormData()
            formData.append('amount', this.itemUser.amount)
            formData.append('settlement_method', this.formUser.settlement_amount)
            formData.append('tax_ratio', this.itemUser.tax_ratio)
            getNowPrice(formData).then(res => {
                if (res.status == 200) {
                    this.formUser.amount = res.data.settlement_amount
                }
            })
        },

        optionTypeTwo () {
            this.actualAmount()
        },

        // 确定接单 dialogFormUser = false
        submitForm (formName) {
            this.loading = true;
            this.$refs[formName].validate((valid) => {
                if (!valid) {
                    this.loading = false;
                    console.log('error submit!!');
                    return false;
                }

                const formData = this.buildFormData();
                const apiMethod = this.adduserInfoTitle === '添加接单人' ? takeOrder : setTakeOrder;

                apiMethod(formData)
                    .then(res => {
                        console.log('操作成功', res);
                        if (res.status === 200) {
                            this.resetFormUser();
                            this.loading = false;
                            this.dialogFormUser = false;
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            this.$emit('call-parent-method', this.itemUser.id);
                            this.getTaskDatile();
                        } else {
                            this.loading = false;
                        }
                    })
                    .catch(err => {
                        this.loading = false;
                    });
            });
        },

        buildFormData () {
            const formData = new FormData();
            const isAddUser = this.adduserInfoTitle === '添加接单人';

            if (isAddUser && !this.optionboxShow) {
                this.appendOrderData(formData, this.itemUser);
            } else if (isAddUser) {
                const selectedItem = this.optionsBoxInfo.find(item => item.id === this.formUser.id);
                if (selectedItem) {
                    this.appendOrderData(formData, selectedItem);
                }
            } else {
                this.appendOrderData(formData, this.itemUser);
            }

            formData.append('pfid', this.formUser.pfid);
            formData.append('settlement_method', this.formUser.settlement_amount);
            formData.append('actual_amount', this.formUser.amount);
            formData.append('user_type', this.formUser.user_type);

            if (this.formUser.amounts) {
                // this.formUser.amounts.forEach((item, index) => {
                //     formData.append(`child_info[${index}]`, item);
                // })
                // this.formUser.amounts.forEach((innerObject, j) => {
                //     Object.keys(innerObject).forEach(fieldName => {
                //         formData.append(`child_info[${j}][${fieldName}]`, innerObject[fieldName]);
                //     });
                // });
                formData.append(`child_info`, JSON.stringify(this.formUser.amounts));
            }


            return formData;
        },

        appendOrderData (formData, item) {
            formData.append('order_id', item.order_id);
            item.child_id.forEach((value, index) => {
                formData.append(`child_id[${index}]`, value);
            });
        },

        resetFormUser () {
            this.formUser.combinedId = null;
            this.formUser.pfid = '';
            this.formUser.user_type = '';
            this.formUser.settlement_amount = '1';
        },
        // 选择接单人方法
        changesyscodetwo () {
            const [selectedPfid, selectedUserType] = this.formUser.combinedId.split(',');
            this.addUserInfo.some(item => {
                if (item.pfid == selectedPfid && item.user_type == selectedUserType) {
                    this.formUser.user_type = item.user_type
                    this.formUser.pfid = item.pfid
                    return true
                }

                return false
            })
        },
        // 价格详情
        openOtherPrice (item, name) {
            this.priceBtn = name
            this.imgItemInfo = item
            if (item.status == 60) {
                this.backOtherPrice[0].type = '1'
            }
            this.dialogShow = '0'
            otherCost().then(res => {
                console.log('确认完成需要信息', res);
                this.amountNeed_info = res.data.need_info
                // console.log('this.amountNeed_info', this.amountNeed_info);

            })
            if (item.other_amount != '0.00') {
                const formData = new FormData()
                formData.append(`status`, '50');
                item.child_id.forEach(function (value, index) {
                    formData.append(`child_id[${index}]`, value);
                });
                // 调用接口
                boxPicture(formData).then(res => {
                    console.log(res, '费用信息');
                    if (res.status == 200) {
                        const dataArray = res.data.images
                        const convertedDataArray = dataArray.map(data => {
                            return Object.keys(data).reduce((acc, key) => {
                                // 检查是否是需要转换的字段
                                if (key === 'amount' || key === 'field') {
                                    acc[key] = parseFloat(data[key]); // 转换为数字
                                } else {
                                    acc[key] = data[key]; // 保持原值
                                }
                                return acc;
                            }, {});
                        });
                        console.log('处理后的数据', convertedDataArray);

                        this.backOtherPrice = convertedDataArray
                    }
                })
                this.dialogTableVisible = true
            } else {
                // if (item.status >= 20) {
                // this.backOtherPrice.amount = ""
                // this.backOtherPrice.field = ''
                // this.backOtherPrice.field_name = ""
                // this.backOtherPrice.format_type = "file"
                // this.backOtherPrice.type = ''
                // this.backOtherPrice.value = ''
                this.backOtherPrice = [
                    {
                        amount: "",
                        field: '',
                        field_name: "",
                        format_type: "file",
                        type: '',
                        value: ''
                    }
                ]
                if (item.status == 60) {
                    this.backOtherPrice[0].type = '1'
                }
                this.dialogTableVisible = true
                // }

            }
        },
        // 表格新增一行
        addTableRow () {
            let type = ''
            if (this.imgItemInfo.status == 60) {
                type = '1'
            }
            this.backOtherPrice.push({
                amount: "",
                field: '',
                field_name: "",
                format_type: "file",
                type: type,
                value: ''
            })
        },
        // 表格删除一行
        removeTableRow (index) {

            this.backOtherPrice.splice(index, 1)
        },
        // 清空当前行数据
        removeData (index) {
            let type = ''
            if (this.imgItemInfo.status == 60) {
                type = '1'
            }
            this.backOtherPrice = [{
                amount: "",
                field: '',
                field_name: "",
                format_type: "file",
                type: type,
                value: ''
            }]
        },
        // 获取费用名称
        changesyscode (sysCode, index) {
            this.amountNeed_info[0].some(item => {
                if (item.field == sysCode) {
                    this.backOtherPrice[index].field_name = item.field_name
                    console.log(this.backOtherPrice);
                    return true
                }

                return false
            })
        },
        // 保存或确认落箱
        conserve (name) {
            this.loading = true
            const order_id = this.imgItemInfo.order_id
            const id = this.imgItemInfo.id
            // 参数信息
            const formData = new FormData()
            formData.append('order_id', order_id)
            this.imgItemInfo.child_id.forEach(function (value, index) {
                formData.append(`tc_id[${index}]`, value);
            });
            if (name == '确认落箱') {
                formData.append('status', 50)
            }
            // formData.append('need_info', JSON.stringify(this.need_info))
            // console.log('我是费用名称', this.backOtherPrice[0].field_name);
            // 判断传参条件
            if (this.backOtherPrice[0].field != '' || this.backOtherPrice[0].amount != '' || this.backOtherPrice[0].value != '') {
                let uploadPrice = [this.backOtherPrice]
                uploadPrice.forEach((outerArray, i) => {
                    outerArray.forEach((innerObject, j) => {
                        Object.keys(innerObject).forEach(fieldName => {
                            formData.append(`need_info[${i}][${j}][${fieldName}]`, innerObject[fieldName]);
                        });
                    });
                });
            } else {
                formData.append(`need_info`, "");
            }
            if (name == '确认落箱') {
                // 判断落箱是否填写了信息
                if (this.backOtherPrice[0].field != '' || this.backOtherPrice[0].amount != '' || this.backOtherPrice[0].type != '' || this.backOtherPrice[0].value != '') {
                    if (this.validateBackOtherPrice()) {
                        this.uploadPriceInfo(formData, id)
                    }
                } else {
                    this.uploadPriceInfo(formData, id)
                }
                // 保存的时候
            } else if (name == '保存') {
                if (this.backOtherPrice[0].field != '' || this.backOtherPrice[0].amount != '' || this.backOtherPrice[0].value != '') {
                    if (this.validateBackOtherPrice()) {
                        this.saveMessage(formData)
                    }
                } else {
                    this.saveMessage(formData)
                }

            }
        },
        // 上传费用信息最终
        uploadPriceInfo (formData, id) {
            affirmTakeBox(formData).then(res => {
                console.log('上传成功', res);
                this.loading = false
                if (res.status == 200) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.dialogTableVisible = false
                    this.$emit('call-parent-method', id);
                    // if (this.taskId == '') {
                    //     this.getOrderStatus()
                    // } else {
                    //     this.getTaskDatile()
                    // }
                    this.getTaskDatile()

                }
            }).catch(err => {
                this.loading = false
            })
        },
        // 保存信息最终
        saveMessage (formData) {
            setPrice(formData).then(res => {
                console.log('上传成功', res);
                this.loading = false
                if (res.status == 200) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.dialogTableVisible = false
                    // this.$emit('call-parent-method');
                    // if (this.taskId == '') {
                    //     this.getOrderStatus()
                    // } else {
                    //     this.getTaskDatile()
                    // }
                    this.getTaskDatile()

                }
            }).catch(err => {
                this.loading = false
            })
        },
        // 保存校验
        validateBackOtherPrice () {
            for (const item of this.backOtherPrice) {
                if (!item.amount) {
                    this.$alert('费用信息不能为空', '提示', {
                        confirmButtonText: '确定',
                    });
                    this.loading = false
                    return false; // 校验失败
                }
                if (!item.field_name) {
                    this.$alert('费用类型不能为空', '提示', {
                        confirmButtonText: '确定',
                    });
                    this.loading = false
                    return false; // 校验失败
                }
                // if (!item.type) {
                //     this.$alert('归属不能为空', '提示', {
                //         confirmButtonText: '确定',
                //     });
                //     this.loading = false
                //     return false; // 校验失败
                // }
                if (item.type != 1 && !item.value) {
                    this.$alert('照片不能为空', '提示', {
                        confirmButtonText: '确定',
                    });
                    this.loading = false
                    return false; // 校验失败
                }
            }
            return true; // 校验通过
        },
        // 删除费用照片
        delImageTwo (item) {
            item.value = ''
        },
        // 删除过磅要求图片
        delImageThree (item, index) {
            this.weighed_img.splice(index, 1)
        },
        // 修改箱号
        setBox_number () {
            let flag = true
            const formData = new FormData
            this.container.forEach((element, i) => {
                if (!element.container_number) {
                    this.$alert('箱号不能为空', '提示', {
                        confirmButtonText: '确定',
                    });
                    this.loading = false
                    flag = false
                }
                Object.keys(element).forEach(fieldName => {
                    formData.append(`container[${i}][${fieldName}]`, element[fieldName]);
                });
            });
            if (flag) {
                setBoxNumber(formData).then(res => {
                    console.log('修改成功', res);
                    if (res.status == 200) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.is_boxNumber = true
                    }
                })
            }
        },

        // 修改价格
        setDialog (item, value, type) {
            if (item.payment_method == 1 && item.status < 50) {
                this.$set(this.form, 'price', '')
                this.dialogFormVisible = true
                this.childData = item.child_id
                this.setAmount_id = item.order_id
                this.setAmount_method = type
                if (value == '当前货主运费') {
                    this.oldPrice = item.amount
                } else {
                    this.oldPrice = item.actual_amount
                }
                this.oldPriceName = value
            }

        },
        // 过滤输入的方法
        filterWeightInput (inputValue) {
            // 如果第一位是小数点，移除小数点
            if (inputValue.startsWith('.')) {
                return inputValue.slice(1); // 移除小数点
            }

            // 使用正则表达式过滤非数字字符
            let numericValue = inputValue.replace(/[^0-9.]/g, '');
            // 允许一个小数点
            const parts = numericValue.split('.');
            if (parts.length > 2) {
                // 如果有多个小数点，只保留第一个
                numericValue = parts[0] + '.' + parts.slice(1).join('').replace(/\./g, '');
            }

            return numericValue;
        },
        // 过滤推荐价格
        filterAmount (type, idOrIndex) {
            let inputValue = '';

            // 获取输入的值
            if (type === 1) {
                // 处理 this.form.price
                inputValue = this.form.price;
            } else if (type === 2) {
                if (this.adduserInfoTitle === '修改接单人') {
                    // 处理 this.formUser.amount
                    inputValue = this.formUser.amount;
                } else {
                    // 处理 this.formUser.amounts 数组中的值
                    const item = this.formUser.amounts.find(item => item.id === idOrIndex);
                    if (item) {
                        inputValue = item.actual_amount;
                    }
                }
            }

            // 过滤非数字字符
            let roundedValue = inputValue.replace(/[^0-9]/g, '');

            if (roundedValue === '0' || isNaN(roundedValue)) {
                roundedValue = '';
            }

            // 更新对应的值
            if (type === 1) {
                // 更新 this.form.price
                this.form.price = roundedValue;
            } else if (type === 2) {
                if (this.adduserInfoTitle === '修改接单人') {
                    // 更新 this.formUser.amount
                    this.formUser.amount = roundedValue;
                } else {
                    // 更新 this.formUser.amounts 数组中的值
                    const item = this.formUser.amounts.find(item => item.id === idOrIndex);
                    if (item) {
                        this.$set(item, 'actual_amount', roundedValue);
                    }
                }
            }
        },
        // 其他费用过滤
        getSuccessPrice (index) {
            // 获取当前输入的值
            const inputValue = this.backOtherPrice[index].amount

            // 过滤输入值
            const filteredValue = this.filterWeightInput(inputValue);
            console.log('我是过滤后的value', filteredValue);
            // 更新输入值
            this.backOtherPrice[index].amount = filteredValue;
        },
        // 模态框确定
        affirmSet (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const formData = new FormData()
                    if (this.oldPriceName == '当前货主运费') {
                        formData.append('amount', this.form.price)
                        formData.append('type', 1)
                    } else {
                        formData.append('actual_amount', this.form.price)
                        formData.append('type', 2)
                        formData.append('order_id', this.setAmount_id)
                    }
                    this.childData.forEach(function (value, index) {
                        // 使用索引来构建字段的键，例如 'arrayField[0]'
                        formData.append(`child_id[${index}]`, value);
                    });
                    if (this.setAmount_method == 1) {
                        // 调用验证资金池
                        isVerify(formData).then(res => {
                            if (res.status == 200) {
                                if (res.data.code == 1) {
                                    // 调用修改
                                    this.confirmSetPrice(formData)
                                } else {
                                    this.$message.error(res.data.err);
                                }
                            }
                        })
                    } else {
                        // 调用修改运费接口
                        this.confirmSetPrice(formData)
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 修改运费接口
        confirmSetPrice (formData) {
            setFreight(formData).then(res => {
                console.log(res, '修改成功');
                if (res.status == 200) {
                    this.form.price = ''
                    this.dialogFormVisible = false
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    this.getTaskDatile()
                }
            })
        },
        // 确认完成
        confirm (item) {
            // 每次点开都要重置数据
            this.backOtherPrice = [
                {
                    amount: "",
                    field: '',
                    field_name: "",
                    format_type: "file",
                    type: '',
                    value: ''
                }
            ]
            this.nowItem = item
            // 获取下拉列表信息
            otherCost().then(res => {
                // console.log('确认完成需要信息', res);
                this.amountNeed_info = res.data.need_info

            })

            this.dialogShow = '1'
            const formData = new FormData()
            formData.append(`status`, '50');
            item.child_id.forEach(function (value, index) {
                formData.append(`child_id[${index}]`, value);
            });
            // 调用接口
            boxPicture(formData).then(res => {
                console.log(res, '费用信息');
                if (res.status == 200) {
                    if (res.data.images.length > 0) {
                        const dataArray = res.data.images
                        const convertedDataArray = dataArray.map(data => {
                            return Object.keys(data).reduce((acc, key) => {
                                // 检查是否是需要转换的字段
                                if (key === 'amount' || key === 'field') {
                                    acc[key] = parseFloat(data[key]); // 转换为数字
                                } else {
                                    acc[key] = data[key]; // 保持原值
                                }
                                return acc;
                            }, {});
                        });
                        this.backOtherPrice = convertedDataArray
                    }
                }
            })
            this.dialogTableVisible = true
            // }
        },
        // dialogConfirm
        dialogConfirm () {
            const item = this.nowItem
            const formData = new FormData()
            const order_id = item.order_id
            formData.append('order_id', order_id)
            item.child_id.forEach(function (value, index) {
                formData.append(`tc_id[${index}]`, value);
            });
            formData.append('status', 51)

            if (this.backOtherPrice[0].field_name != '') {
                let uploadPrice = [this.backOtherPrice]
                uploadPrice.forEach((outerArray, i) => {
                    outerArray.forEach((innerObject, j) => {
                        Object.keys(innerObject).forEach(fieldName => {
                            formData.append(`need_info[${i}][${j}][${fieldName}]`, innerObject[fieldName]);
                        });
                    });
                });
            } else {
                formData.append(`need_info`, "");
            }
            if (this.backOtherPrice[0].field != '' || this.backOtherPrice[0].amount != '' || this.backOtherPrice[0].type != '') {
                console.log('查看当前信息', this.backOtherPrice);

                if (this.validateBackOtherPrice()) {
                    affirmTakeBox(formData).then(res => {
                        console.log('上传成功', res);
                        this.loading = false
                        if (res.status == 200) {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            this.dialogTableVisible = false
                            // if (this.taskId == '') {
                            //     this.getOrderStatus()
                            // } else {
                            //     this.getTaskDatile()
                            // }
                            this.getTaskDatile()

                        }
                    }).catch(err => {
                        this.loading = false
                    })
                }
            } else {
                affirmTakeBox(formData).then(res => {
                    console.log('上传成功', res);
                    this.loading = false
                    if (res.status == 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.dialogTableVisible = false
                        // if (this.taskId == '') {
                        //     this.getOrderStatus()
                        // } else {
                        //     this.getTaskDatile()
                        // }
                        this.getTaskDatile()

                    }
                }).catch(err => {
                    this.loading = false
                })
            }
        },
        // 查看箱信息
        examineBox (item, status, fId, text) {
            this.isDel = false
            this.imagesShow = true
            this.is_boxNumber = false
            console.log('像信息', item);
            this.imgItemInfo = item
            this.imageStatus = status
            this.factoryUpload = fId
            if (fId) {
                this.factory_address = fId.load_and_unload_address
            }
            if (text) {
                this.textStatus = text
            }
            this.dialogVisible = true
            const formData = new FormData()
            if (status == 40) {
                formData.append('tf_id', fId.tf_id)
                formData.append('status', 40)
                this.showName = 1
            } else {
                formData.append('status', 30)
                this.showName = 0
            }
            formData.append('order_id', item.order_id)
            item.child_id.forEach(function (value, index) {
                formData.append(`child_id[${index}]`, value);
            });
            // 调用接口
            getBoxInfo(formData).then(res => {
                console.log(res, '我是图片信息');
                if (res.status == 200) {
                    this.imageInfo = res.data.need_info
                    this.add_time = res.data.other.submit_time
                    this.container = res.data.container
                    if (item.child_id.length > 1 && status == 30) {
                        this.splitImages()
                    }
                    // 将值存起来，用来做对比
                    this.oldContainer = JSON.parse(JSON.stringify(res.data.container));
                }
                // console.log('time', this.imageInfo[0].add_time);
            })
        },
        // 拆分数组
        splitImages () {
            this.imagesShow = false
            const halfLength = Math.ceil(this.imageInfo.length / 2); // 计算一半的长度
            this.firstHalfImages = this.imageInfo.slice(0, halfLength); // 第一组
            this.secondHalfImages = this.imageInfo.slice(halfLength); // 第二组
        },
        // 删除箱信息
        delImage (item) {
            item.value = ''
            this.isDel = true
        },
        // 确认修改信息
        setImage () {
            // console.log('我是工厂信息', this.factoryUpload);

            // 校验图片是否上传完整
            let isValid = true
            for (let i = 0; i < this.imageInfo.length; i++) {
                const innerArray = this.imageInfo[i];
                if (!innerArray.value) {
                    isValid = false;
                    this.$alert('请将照片填写完整', '提示', {
                        confirmButtonText: '确定',
                    });
                    break; // 找到一个空值后停止检查
                }
            }
            // 对比是否调用修改接口
            let flagTwo = false
            if (this.container) {
                for (let i = 0; i < this.oldContainer.length; i++) {
                    // console.log('我是新数据', this.container[i].container_number);
                    // console.log('我是旧数据', this.oldContainer[i].container_number);
                    if (this.oldContainer[i].container_number != this.container[i].container_number) {
                        // console.log('我是新数据', this.container[i].container_number);

                        flagTwo = true
                        break;
                    }
                }
            }
            let flag = true
            if (this.container) {
                this.container.forEach((element, i) => {
                    if (!element.container_number) {
                        this.$alert('箱号不能为空', '提示', {
                            confirmButtonText: '确定',
                        });
                        this.loading = false
                        flag = false
                    }
                });
            }

            if (isValid && flag) {
                if (flagTwo && !this.is_boxNumber) {
                    this.setBox_number()
                }
                this.loading = true
                const order_id = this.imgItemInfo.order_id
                let imageInfoTwo = [this.imageInfo]
                const formData = new FormData()
                formData.append('order_id', order_id)
                this.imgItemInfo.child_id.forEach(function (value, index) {
                    formData.append(`tc_id[${index}]`, value);
                });
                formData.append('status', this.imageStatus)
                if (this.imageStatus == '40') {
                    formData.append('factory_id', this.factoryUpload.tf_id)
                }
                // formData.append('need_info', JSON.stringify(this.need_info))
                imageInfoTwo.forEach((outerArray, i) => {
                    outerArray.forEach((innerObject, j) => {
                        Object.keys(innerObject).forEach(fieldName => {
                            formData.append(`need_info[${i}][${j}][${fieldName}]`, innerObject[fieldName]);
                        });
                    });
                });
                affirmTakeBox(formData).then(res => {
                    this.loading = false
                    console.log('上传成功', res);
                    if (res.status == 200) {
                        this.$message({
                            message: '照片修改成功',
                            type: 'success'
                        });
                        this.isDel = false
                        this.is_boxNumber = false
                        this.dialogVisible = false
                        // if (this.taskId == '') {
                        //     this.getOrderStatus()
                        // } else {
                        //     this.getTaskDatile()
                        // }
                        this.getTaskDatile()
                    }
                }).catch(err => {
                    this.loading = false
                })
            }
        },
        // 未提箱上传提箱装卸货信息
        uploadImg (item, status, factoryInfo) {
            console.log('我是item', item);
            if (!item.car_number) {
                this.$alert('暂无承运人信息，不可提箱。', '提示', {
                    confirmButtonText: '确定',
                });
                return
            }
            this.is_boxNumber = false
            if (item.status == 20) {
                this.uploadTitle = '上传提箱照片'
                // this.setBox_number()
            } else if (item.status == 30 && item.business_type == '进口') {
                this.uploadTitle = '上传卸货照片'
            } else if (item.status == 30 && item.business_type == '出口') {
                this.uploadTitle = '上传装货照片'
            }
            this.dialogVisibleTwo = true
            // 存储上传图片信息
            this.imgItemInfo = item
            // 获取提箱信息
            const formData = new FormData()
            formData.append('order_id', item.order_id)
            formData.append('status', status)
            item.child_id.forEach(function (value, index) {
                formData.append(`child_id[${index}]`, value);
            });
            if (factoryInfo) {
                formData.append('tf_id', factoryInfo.tf_id)
                this.factoryUpload = factoryInfo
            }
            getBoxInfo(formData).then(res => {
                console.log('需要信息', res);
                this.need_info = res.data.need_info
                this.container = res.data.container
                // 增加属性
                this.need_info.forEach(item => {
                    item.forEach(items => {
                        this.$set(items, 'value', null);
                    })
                })

            })
        },
        // 上传图片方法
        handleAvatarSuccess (res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload (file, item, index, indexTwo) {
            this.loading = true
            let formData = new FormData();
            formData.append("file", file);
            fileUpload(formData).then(res => {
                this.loading = false
                console.log(res, '我是路径')
                if (res.status == 200) {
                    let path = res.data.href
                    // item.value = path
                    this.$set(item, 'value', path)
                    console.log('我是item', item);

                    if (index == 0 && indexTwo && item.status == 20) {
                        // 调用文件识别
                        this.fileRecognize(item.value, indexTwo)
                    } else if (this.container) {
                        if (index == 0) {
                            this.fileRecognize(item.value, index, indexTwo)
                        }
                    }
                }
            }).catch(response => {
                this.loading = false
                console.log('图片上传失败')
            })
            const isLt2M = file.size / 1024 / 1024 < 10;

            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isLt2M;
        },
        // 上传
        goRequest () {

        },
        beforeAvatarUploadTwo (file, index) {
            // this.weighed_img.push({
            //     value: ''
            // })
            this.loading = true
            let formData = new FormData();
            formData.append("file", file);
            fileUpload(formData).then(res => {
                this.loading = false
                console.log(res, '我是路径')
                if (res.status == 200) {
                    let path = res.data.href
                    // item.value = path
                    // this.$set(item, 'value', path)
                    this.weighed_img[index].value = path
                    this.weighed_img.push({
                        value: ''
                    })
                }
            }).catch(response => {
                this.loading = false
                console.log('图片上传失败')
            })
            const isLt2M = file.size / 1024 / 1024 < 10;

            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isLt2M;
        },
        // 文件识别
        fileRecognize (value, index, indexTwo) {
            console.log('我是indexTwo', indexTwo);
            console.log('我是index', index);

            const formData = new FormData()
            formData.append('file', value)
            formData.append('type', 'container')
            recognize(formData).then(res => {
                console.log('我是识别信息', res);
                if (res.status == 200) {
                    if (res.data.container_number && res.data.container_number != '' && indexTwo == 0) {
                        this.container[index].container_number = res.data.container_number
                    } else if (indexTwo == 1 && res.data.container_number != '') {
                        this.container[indexTwo].container_number = res.data.container_number
                    } else {
                        this.$message.error('识别失败，请手动输入箱号。')
                    }
                    // if (indexTwo == 0 || indexTwo == 1 && this.container[indexTwo].container_number == '') {
                    //     this.container[indexTwo].container_number = res.data.container_number
                    // }
                }
            })
        },
        // 确认提箱
        uploadOver () {
            // 校验图片是否上传完整
            let isValid = true
            for (let i = 0; i < this.need_info.length; i++) {
                const innerArray = this.need_info[i];
                for (let j = 0; j < innerArray.length; j++) {
                    const item = innerArray[j];
                    if (!item.value) {
                        isValid = false;
                        this.$alert('请将照片上传完整！', '提示', {
                            confirmButtonText: '确定',
                        });
                        break; // 找到一个空值后停止检查
                    }
                }
            }
            let flag = true
            if (this.imgItemInfo.status == 20) {
                this.container.forEach((element, i) => {
                    if (!element.container_number) {
                        this.$alert('箱号不能为空', '提示', {
                            confirmButtonText: '确定',
                        });
                        this.loading = false
                        flag = false
                    }
                });
            }
            if (isValid && flag) {
                if (this.container && !this.is_boxNumber) {
                    this.setBox_number()
                }

                const order_id = this.imgItemInfo.order_id
                const tc_id = this.imgItemInfo.id
                let status = ''
                if (this.imgItemInfo.status == 20) {
                    status = '30'
                } else {
                    status = '40'
                }
                const formData = new FormData()
                formData.append('order_id', order_id)
                this.imgItemInfo.child_id.forEach(function (value, index) {
                    formData.append(`tc_id[${index}]`, value);
                });
                formData.append('status', status)
                if (this.factoryUpload.tf_id) {
                    formData.append('factory_id', this.factoryUpload.tf_id)
                }
                console.log('this.factoryUpload.tf_id', this.factoryUpload);

                // formData.append('need_info', JSON.stringify(this.need_info))
                this.need_info.forEach((outerArray, i) => {
                    outerArray.forEach((innerObject, j) => {
                        Object.keys(innerObject).forEach(fieldName => {
                            formData.append(`need_info[${i}][${j}][${fieldName}]`, innerObject[fieldName]);
                        });
                    });
                });
                this.loading = true
                affirmTakeBox(formData).then(res => {
                    this.loading = false
                    this.is_boxNumber = false
                    console.log('上传成功', res);
                    if (res.status == 200) {
                        this.$message({
                            message: '照片上传成功',
                            type: 'success'
                        });
                        this.dialogVisibleTwo = false
                        // if (this.taskId == '') {
                        //     this.getOrderStatus()
                        // } else {
                        //     this.getTaskDatile()
                        // }
                        this.getTaskDatile()
                    }
                }).catch(res => {
                    this.loading = false

                })
            }
        },
        // 查看位置
        getLocation (car_number, item) {
            this.locationData = item
            this.dialogVisiblelocation = true
            // console.log('我是柜子的id', item);
            // 处理工厂地址
            let positionArr = [];
            item.factory.forEach(items => {
                let position = {}; // 创建一个空对象
                for (const key in items) {
                    if (key === 'lat' || key === 'lng') {
                        position[key] = items[key]; // 将 lat 和 lng 添加到对象中
                    }
                }
                // 确保对象中有 lat 和 lng 后再推入数组
                if (position.lat !== undefined && position.lng !== undefined) {
                    positionArr.push(position); // 将对象推入数组
                }
            });
            // console.log(positionArr, '我是工厂地址');
            this.otherPosition = positionArr

            const formData = new FormData()
            // '鲁UH0186'
            formData.append('car_number', car_number)
            item.child_id.forEach(function (value, index) {
                formData.append(`child_id[${index}]`, value);
            });
            nowLocation(formData).then(res => {
                console.log(res, '我是位置信息');
                if (res.status == 200) {
                    this.locationInfo = res.data
                    if (typeof (this.locationInfo) != 'object') {
                        this.locationInfo = {
                            position: '当前车辆北斗定位异常，暂无法获取位置信息!',
                            position_time: '无法获取更新时间!',
                            spd: '无法获取当前速度!',
                        }
                        console.log('我是异常数据', this.locationInfo);
                    }
                    // 动态加载高德地图 API 
                    this.$nextTick(() => {
                        this.initMap(this.locationInfo, positionArr); // 在 DOM 更新后初始化地图
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.msg
                });
            })

            // center: [location.longitude, location.latitude], // 设置地图中心点（北京）
        },
        initMap (locationInfo) {
            this.form.address = locationInfo.position;
            this.form.lat = locationInfo.latitude || 36.014076; // 使用默认位置（例如北京）
            this.form.lng = locationInfo.longitude || 120.202032; // 使用默认位置（例如北京）
            let rotation = locationInfo.drc || 90;
            let otherPosition = this.otherPosition; // 工厂的坐标数组
            let expectedInfo = []
            if (locationInfo.expectedInfo) {
                expectedInfo = locationInfo.expectedInfo.split('，')
            } else {
                expectedInfo = ['北斗定位异常', '暂无距离信息']
            }
            AMapLoader.load({
                key: localStorage.getItem('map_key'),
                version: "2.0",
                plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
            })
                .then((AMap) => {
                    this.map = new AMap.Map("container", {
                        viewMode: "2D",
                        zoom: 10,
                        center: [this.form.lng, this.form.lat],
                    });

                    let icon = new AMap.Icon({
                        image: this.imgUrl,
                        size: new AMap.Size(60, 30),
                        imageSize: new AMap.Size(60, 30)
                    });
                    let icon_fac = new AMap.Icon({
                        image: this.imgUrl_fac,
                        size: new AMap.Size(60, 60),
                        imageSize: new AMap.Size(60, 60)
                    });
                    let icon_port = new AMap.Icon({
                        image: this.imgUrl_port,
                        size: new AMap.Size(50, 50),
                        imageSize: new AMap.Size(50, 50)
                    });
                    // 创建并添加主标记
                    this.marker = new AMap.Marker({
                        map: this.map,
                        position: [this.form.lng, this.form.lat],
                        icon: icon,
                        offset: new AMap.Pixel(-30, -15),
                        angle: rotation - 90,
                    });
                    this.map.add(this.marker);

                    // 创建信息窗口
                    let infoWindow = new AMap.InfoWindow({
                        content: `<div style="color: white; background-color: #3B8BF3; text-align: center;">
                                <div style="font-size: 14px">${expectedInfo[0]}</div>
                                <div style="font-size: 12px">${expectedInfo[1]}</div>
                            </div>`, // 设置内容和样式
                        offset: new AMap.Pixel(0, -30) // 设置偏移量，使窗口显示在标记上方
                    });

                    // 显示信息窗口
                    infoWindow.open(this.map, this.marker.getPosition());

                    // 遍历工厂坐标数组，为每个工厂创建一个标记
                    otherPosition.forEach(pos => {
                        let factoryMarker = new AMap.Marker({
                            map: this.map,
                            position: [pos.lng, pos.lat],
                            icon: icon_fac, // 可以为工厂使用相同或不同的图标
                            offset: new AMap.Pixel(-30, -30) // 根据需要调整偏移
                        });
                        this.map.add(factoryMarker);
                    });
                    let portMarker = new AMap.Marker({
                        map: this.map,
                        position: [120.202032, 36.014076],
                        icon: icon_port, // 可以为工厂使用相同或不同的图标
                        offset: new AMap.Pixel(-25, -25) // 根据需要调整偏移
                    });
                    this.map.add(portMarker);
                    // 调整视图以包含所有标记
                    // this.map.setFitView();
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    },
    watch: {
        taskId (newValue, oldValue) {
            console.log('Message changed from:', oldValue, 'to:', newValue);
            // 调用任务详情接口
            if (newValue != '' && newValue != 'noData') {
                this.getTaskDatile()
            } else {
                this.orderDetailData = []
            }
        }
    }

}
</script>

<style scoped lang="scss">
.orderDetail {
    width: 100%;
    // min-height: calc(100vh - 98px);
    height: 100%;
    // flex: 1;
}

.orderDetail-list {
    width: 100%;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: start;
}

.orderDetail-item {
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    // margin-right: 12px;
    margin-bottom: 12px;
}

.item-head-info {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: url(../../../assets/image/orderDetail-bg.png);
    background-size: 100% 100%;
    position: relative;
}

.head-info-left {
    width: 50px;

}

.info-left-img {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background-color: #fff;
}

.head-info-right {
    flex: 1;
}

.info-right-text {
    color: rgb(78, 89, 105);
    font-size: 10px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;

    span {
        color: rgb(29, 33, 41);
        font-weight: 500;
    }
}

.info-right-tag {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.right-tag-style {
    background-color: rgb(220, 231, 253);
    height: 20px;
    color: rgb(8, 29, 123);
    font-weight: 400;
    font-size: 10px;
    padding: 0 8px;
    margin-right: 8px;
    line-height: 20px;
    text-align: center;
    border-radius: 6px;
}

.changeBg {
    background-color: rgb(255, 255, 255);
    color: rgb(78, 89, 105);
}

.item-head-info-type {
    background-color: rgb(22, 93, 255);
    // width: 52px;
    height: 16px;
    padding: 0 8px;
    border-radius: 0px 8px 0px 15px;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 16px;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 10px;
}

.head-type-item-yellow {
    background-color: rgb(247, 186, 30);
}

.head-type-item-orange {
    background-color: rgb(255, 125, 0);
}

.head-type-item-gray {
    background-color: rgb(20, 201, 201);
}

.head-type-item-green {
    background-color: rgb(0, 186, 115);
}

.item-content-info {
    padding: 12px 16px;
}

.content-address-item {
    display: flex;
    // margin-bottom: 16px;
}

.address-item-left {
    width: 35px;
    // margin-top: -2px;
}

.suitcase {
    background-color: rgb(255, 125, 0);
    width: 24px;
    height: 16px;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
}

.address-item-right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    // align-items: center;
}

.item-right-left {
    color: rgb(29, 33, 41);
    font-size: 12px;
    font-weight: 500;
}

.address-station {
    color: rgb(134, 144, 156);
    font-weight: 400;
    font-size: 10px;
    margin-top: 5px;
}

.address-station_two {
    font-size: 10px;
}

.line {
    width: 100%;
    height: 1px;
    background-color: rgb(229, 230, 235);
    margin-bottom: 8px;
}

.attention-tags {
    display: flex;
    align-items: center;
    // margin-bottom: 6px;
    height: 20px;
}

.attention-tags-item {
    cursor: pointer;
    padding: 0 8px;
    height: 20px;
    background-color: rgb(232, 247, 255);
    color: rgb(22, 93, 255);
    border-radius: 4px;
    font-weight: 400;
    font-size: 10px;
    margin-right: 8px;
    line-height: 20px;
    text-align: center;
}

.orderDetail-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
}

.orderDetail-price-info {
    color: rgb(78, 89, 105);
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
}

.user-null {
    text-align: center;
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    position: relative;
}

.dirve-info {
    display: flex;
    align-items: center;
}

.dirve-info-phone {
    display: flex;
    height: 48px;

    margin-left: 10px;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
}

.info-phone-name {
    color: rgb(29, 33, 41);
    font-size: 12px;
    font-weight: 500;
}

.info-phone-car {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
}

.driver_position {
    position: absolute;
    bottom: 2px;
    right: 0;
    color: rgb(22, 93, 255);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px;
    cursor: pointer;
}

.driver_cancel {
    position: absolute;
    bottom: 27px;
    right: 0;
    color: rgb(22, 93, 255);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px;
    cursor: pointer;
}

.content-address-list {
    height: 226px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    // justify-content: space-between;
}

.affirm {
    display: flex;
    flex: 1;
    justify-content: end;
    align-items: center;
}

.box_img {
    // display: flex;
    // justify-content: space-around;
    // flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 30px;
}

.box_img_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    // width: 50%;
    // width: 300px;
    // height: 200px;
    padding: 0px 16px 22px;
    margin-bottom: 20px;
}

.box_img_item_two {
    display: flex;
    align-items: center;
    // width: 50%;
    padding: 0px 16px 22px;
    margin-bottom: 20px;
}

.box_img_item_info {
    display: flex;
    flex-wrap: wrap;
    width: 180px;
    height: 180px;
    justify-content: right;
    // object-fit: cover;
    // width: 100%;
    // height: 100%;
    // object-fit: cover;
    // overflow: hidden;
}

.imageTextInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.image {
    // width: 400px;
    // height: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    // object-position: center center;
}

.user-null_top {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    height: 48px;
    justify-content: space-between;
}

#mapContainer {
    height: 400px;
    /* 设置地图容器的高度 */
}

.little {
    width: 6px;
    height: 6px;
    background: rgb(140, 161, 192);
    border-radius: 50%;
    margin-left: 9px;
    margin-top: 2px;
}

.dashed_line {
    width: 0;
    height: 56px;
    border-left: 2px dashed rgb(140, 161, 192);
    margin-left: 11px;
    margin-top: 3px;
    // margin-bottom: 2px;
}

.solid_line {
    width: 0;
    height: 56px;
    border-left: 2px solid rgb(140, 161, 192);
    margin-left: 11px;
    margin-top: 3px;
}

.solid_line_two {
    width: 0;
    height: 28px;
    border-left: 2px solid rgb(140, 161, 192);
    margin-left: 11px;
    margin-top: 3px;
}

.dashed_line_two {
    width: 0;
    height: 28px;
    border-left: 2px dashed rgb(140, 161, 192);
    margin-left: 11px;
    margin-top: 3px;
}

.little_two {
    margin-top: 0px;
}

.suitcase_tow {
    background: rgb(140, 161, 192);
    color: #fff;
}

.img_box {
    width: 24px;
    height: 24px;
    position: relative;
}

.plant_num {
    color: rgb(255, 125, 0);
    // font-family: HYQiHei;
    font-size: 9px;
    font-weight: 600;
    position: absolute;
    top: 3px;
    left: 5px;
}

.plant_num_two {
    color: rgb(255, 125, 0);
    // font-family: HYQiHei;
    font-size: 9px;
    font-weight: 600;
    position: absolute;
    top: 3px;
    left: 3px;
}

.color_text {
    color: rgb(140, 161, 192);
}

.square-image {
    width: 100px;
    height: 78px;
    /* 保持纵横比 */
    object-fit: cover;
    /* 保持图片的方形效果 */
}

// 上传图片样式
.avatar-uploader .el-upload {
    border: 1px dashed #409EFF !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100% !important;
    display: flex;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
    height: 100%;
}

::v-deep .el-upload {
    display: flex;
    margin-right: 10px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

}

::v-deep .el-upload:hover {
    border-color: #409EFF;
    height: 100%;
}

.avatar-uploader-icon {
    font-size: 28px;
    width: 100%;
    color: #8c939d;
    line-height: 178px;
    text-align: center;
}

.avatar {
    // display: block;
    // height: 178px;
    // width: 100%;
    width: 100%;
    height: 178px;
    object-fit: cover;
}

.uploadImg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 17px 15px;

}

.uploadImgs {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px 0px;

}

::v-deep .avatar-uploader {
    flex: 1;
}

.uploadImgItem {
    // width: 50%;
    width: 200px;
    height: 200px;
    flex-wrap: wrap;
}


.table_avatar .avatar {
    height: 78px;
}

.table_avatar .avatar-uploader-icon {
    line-height: 78px;
}

::v-deep .demo-image__error {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    background: #F5F7FA;
    color: #C0C4CC;
    vertical-align: middle;
    height: 78px;
}

.set_box_number {
    display: flex;
    align-items: end;
    margin-top: 10px;
}

.container {
    /* width: 700px; */
    /* flex: 1; */
    height: 600px;
}

.info-box {
    width: 400px;
    background-color: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 15px;
    border-radius: 10px;
    line-height: 20px;
}

.info-box p {
    margin: 0px;
    color: #999;
}

.info-box span {
    color: #333;
    font-weight: 500;
}

/* 自定义滚动条样式 */
.content-address-list::-webkit-scrollbar {
    width: 4px;
    /* 滚动条宽度 */
}

.content-address-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 滚动条滑块颜色 */
    border-radius: 4px;
    /* 滚动条滑块圆角 */
}

.content-address-list::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    /* 滚动条滑块悬停颜色 */
}

.content-address-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 滚动条轨道颜色 */
}

//预警样式
.earlyWarning {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    // top: 0;
    // bottom: 0;
    // left: 0;
    // right: 0;
    box-sizing: border-box;
    /* 红 */
    border-top: 2px solid rgb(245, 63, 63);
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.8);
}

.warningContent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.warningContent img {
    width: 86px;
    height: 86px;
}

.warningText {
    margin: 20px 0;
    color: rgb(29, 33, 41);
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
}

::v-deep .el-dialog {
    margin-top: 3vh !important;
}

::v-deep .el-loading-mask {
    z-index: 999 !important;
}

::v-deep .amap-info-content {
    background-color: #3B8BF3 !important;
    border-radius: 6px;
}

::v-deep .bottom-center .amap-info-sharp {
    border-top: 8px solid #3b8bf3 !important;
}

::v-deep .amap-info-close {
    width: 0px;
    height: 0px;
    overflow: hidden;
}

// 报价列表样式
.quotation {
    display: flex;
    padding: 8px 16px;
    justify-content: space-around;
    align-items: center;
}

.pieceStyle {
    width: 30px;
    display: inline-block;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 使用省略号表示超出部分 */
}
</style>
